<template>
  <div v-if="show" class="script-modal-backdrop" @click="closeModal">
    <div class="script-modal" @click.stop>
      <div class="modal-header">
        <h3>剧本编辑</h3>
        <button @click="closeModal" class="close-btn">×</button>
      </div>

      <div class="modal-body">
        <!-- 标签页导航 -->
        <div class="modal-tabs">
          <button 
            @click="activeTab = 'basic'" 
            :class="{ active: activeTab === 'basic' }"
            class="tab-btn"
          >
            基本信息
          </button>
          <button 
            @click="activeTab = 'content'" 
            :class="{ active: activeTab === 'content' }"
            class="tab-btn"
          >
            内容设置
          </button>
          <button 
            @click="activeTab = 'status'" 
            :class="{ active: activeTab === 'status' }"
            class="tab-btn"
          >
            状态管理
          </button>
        </div>

        <!-- 基本信息标签页 -->
        <div v-if="activeTab === 'basic'" class="tab-content">
          <div class="info-section">
            <h4>基本信息</h4>
            <div class="form-grid">
              <div class="form-group">
                <label for="scriptName">剧本名称 <span class="required">*</span></label>
                <input 
                  id="scriptName"
                  v-model="formData.name" 
                  type="text" 
                  required 
                  placeholder="请输入剧本名称"
                  class="form-input"
                />
              </div>

              <div class="form-group">
                <label for="scriptAuthor">作者</label>
                <input 
                  id="scriptAuthor"
                  v-model="formData.author" 
                  type="text" 
                  placeholder="请输入作者名称"
                  class="form-input"
                />
              </div>

              <div class="form-group full-width">
                <label for="scriptCategory">分类 <span class="required">*</span></label>
                <select id="scriptCategory" v-model="formData.category" required class="form-select">
                  <option value="">请选择分类</option>
                  <option 
                    v-for="category in categories" 
                    :key="category.id" 
                    :value="category.id"
                  >
                    {{ category.name }}
                  </option>
                </select>
              </div>

              <div class="form-group full-width">
                <label for="scriptDescription">剧本介绍</label>
                <textarea 
                  id="scriptDescription"
                  v-model="formData.description" 
                  rows="4" 
                  placeholder="请输入剧本介绍..."
                  class="form-textarea"
                ></textarea>
              </div>
            </div>
          </div>
        </div>

        <!-- 内容设置标签页 -->
        <div v-if="activeTab === 'content'" class="tab-content">
          <div class="info-section">
            <h4>内容设置</h4>
            <div class="content-placeholder">
              <div class="feature-item">
                <div class="feature-icon">📝</div>
                <div class="feature-info">
                  <h5>角色配置</h5>
                  <p>配置剧本中的角色组合和数量</p>
                  <button class="feature-btn">配置角色</button>
                </div>
              </div>
              
              <div class="feature-item">
                <div class="feature-icon">🖼️</div>
                <div class="feature-info">
                  <h5>图片管理</h5>
                  <p>上传和管理剧本相关的图片资源</p>
                  <button class="feature-btn">管理图片</button>
                </div>
              </div>
              
              <div class="feature-item">
                <div class="feature-icon">⚙️</div>
                <div class="feature-info">
                  <h5>高级设置</h5>
                  <p>剧本的高级配置选项</p>
                  <button class="feature-btn">高级设置</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 状态管理标签页 -->
        <div v-if="activeTab === 'status'" class="tab-content">
          <div class="info-section">
            <h4>状态管理</h4>
            <div class="status-section">
              <div class="form-group">
                <label for="scriptStatus">审核状态</label>
                <select id="scriptStatus" v-model="formData.status" class="form-select">
                  <option value="pending">待审核</option>
                  <option value="approved">已通过</option>
                  <option value="rejected">已拒绝</option>
                </select>
              </div>

              <div class="form-group" v-if="formData.status === 'rejected'">
                <label for="reviewNote">拒绝原因</label>
                <textarea 
                  id="reviewNote"
                  v-model="formData.reviewNote" 
                  rows="4" 
                  placeholder="请输入拒绝原因..."
                  class="form-textarea"
                ></textarea>
              </div>

              <div class="status-info" v-if="script">
                <div class="info-item">
                  <span class="info-label">剧本ID:</span>
                  <span class="info-value">{{ script.id }}</span>
                </div>
                <div class="info-item" v-if="script.uploadedAt">
                  <span class="info-label">上传时间:</span>
                  <span class="info-value">{{ formatDate(script.uploadedAt) }}</span>
                </div>
                <div class="info-item" v-if="script.updatedAt">
                  <span class="info-label">更新时间:</span>
                  <span class="info-value">{{ formatDate(script.updatedAt) }}</span>
                </div>
              </div>

              <div class="status-actions" v-if="formData.status !== 'pending'">
                <div class="action-item">
                  <button 
                    @click="formData.status = 'pending'" 
                    class="action-btn reset-btn"
                  >
                    重置为待审核
                  </button>
                  <small>将状态重置为待审核状态</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="footer-actions">
          <button type="button" @click="closeModal" class="cancel-btn">
            取消
          </button>
          <button @click="saveScript" class="save-btn" :disabled="isSaving || !isFormValid">
            <span v-if="isSaving" class="loading-icon">⏳</span>
            {{ isSaving ? '保存中...' : '保存更改' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import systemAPI from '@/utils/systemAPI'
import scriptAPI from '@/utils/scriptAPI'

export default {
  name: 'ScriptEditModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    script: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeTab: 'basic',
      formData: {
        name: '',
        author: '',
        category: '',
        description: '',
        status: 'pending',
        reviewNote: ''
      },
      categories: [],
      isSaving: false
    }
  },
  computed: {
    isFormValid() {
      return this.formData.name && 
             this.formData.name.trim() && 
             this.formData.category &&
             this.formData.category.trim();
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.activeTab = 'basic';
        if (this.script) {
          this.initFormData()
        }
      }
    },
    script: {
      handler(newVal) {
        if (newVal && this.show) {
          this.initFormData()
        }
      },
      immediate: true,
      deep: true
    },
    categories: {
      handler() {
        // 分类加载完成后重新初始化表单数据
        if (this.script && this.show) {
          this.initFormData()
        }
      }
    }
  },
  async mounted() {
    console.log('ScriptEditModal mounted, props:', { show: this.show, script: this.script })
    await this.loadCategories()
    // 分类加载完成后初始化表单数据
    if (this.script && this.show) {
      this.initFormData()
    }
  },
  methods: {
    async loadCategories() {
      try {
        const result = await systemAPI.getCategories()
        if (result.success) {
          this.categories = result.data.categories || []
        }
      } catch (error) {
        console.error('加载分类失败:', error)
      }
    },
    
    initFormData() {
      if (!this.script) return
      
      console.log('初始化表单数据，剧本:', this.script)
      console.log('剧本分类字段:', this.script.category)
      console.log('可用分类列表:', this.categories)
      
      // 为没有分类的剧本设置默认分类
      let defaultCategory = this.script.category || '';
      if (!defaultCategory && this.categories.length > 0) {
        // 根据剧本类型或其他信息智能推断分类
        if (this.script.type === 'official') {
          defaultCategory = 'official';
        } else if (this.script.author && this.script.author.toLowerCase().includes('pandemonium')) {
          defaultCategory = 'official';
        } else {
          // 默认使用自制剧本分类
          const customCategory = this.categories.find(cat => cat.id === 'custom');
          defaultCategory = customCategory ? customCategory.id : this.categories[0].id;
        }
        console.log(`🔧 为剧本 ${this.script.name} 设置默认分类:`, {
          originalCategory: this.script.category,
          defaultCategory: defaultCategory,
          reason: this.script.type === 'official' ? '官方剧本' : 
                 (this.script.author && this.script.author.toLowerCase().includes('pandemonium')) ? '作者匹配官方' : '默认自制剧本'
        });
      }

      this.formData = {
        name: this.script.name || '',
        author: this.script.author || '',
        category: defaultCategory,
        description: this.script.description || '',
        status: this.script.status || 'pending',
        reviewNote: this.script.reviewNote || ''
      }
      
      console.log('✅ 表单数据已初始化:', {
        name: this.formData.name,
        author: this.formData.author,
        category: this.formData.category,
        description: this.formData.description,
        status: this.formData.status
      })
      
      // 验证分类是否在可用列表中
      if (this.formData.category && this.categories.length > 0) {
        const categoryExists = this.categories.find(cat => cat.id === this.formData.category)
        if (!categoryExists) {
          console.warn('❌ 剧本分类不在可用列表中:', this.formData.category)
          console.warn('可用分类列表:', this.categories.map(cat => ({ id: cat.id, name: cat.name })))
        } else {
          console.log('✅ 分类验证通过:', {
            categoryId: this.formData.category,
            categoryName: categoryExists.name
          })
        }
      } else if (this.formData.category) {
        console.warn('⚠️ 分类列表尚未加载，当前分类:', this.formData.category)
      } else {
        console.warn('⚠️ 剧本没有分类信息')
      }
    },
    
    async saveScript() {
      if (!this.script) return
      
      try {
        this.isSaving = true
        
        // 如果状态发生变化，先更新状态
        if (this.formData.status !== this.script.status) {
          console.log('状态发生变化:', {
            scriptId: this.script.id,
            oldStatus: this.script.status,
            newStatus: this.formData.status,
            reviewNote: this.formData.reviewNote
          })
          
          const reviewNote = this.formData.status === 'rejected' ? this.formData.reviewNote : ''
          const reviewedBy = 'admin@mm.com' // 管理员审核
          const statusResult = await scriptAPI.updateScriptStatus(this.script.id, this.formData.status, reviewedBy, reviewNote)
          
          console.log('状态更新结果:', statusResult)
          
          if (!statusResult.success) {
            alert(`状态更新失败: ${statusResult.error}`)
            return
          }
        }
        
        // 构建更新数据
        const updateData = {
          ...this.formData,
          id: this.script.id
        }
        
        // 触发保存事件
        this.$emit('save', updateData)
        
      } catch (error) {
        console.error('保存失败:', error)
        alert('保存失败')
      } finally {
        this.isSaving = false
      }
    },
    
    closeModal() {
      this.activeTab = 'basic';
      this.$emit('close')
    },

    formatDate(dateString) {
      if (!dateString) return '';
      try {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        });
      } catch (error) {
        return dateString;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.script-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.script-modal {
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #ffd700;
  border-radius: 12px;
  width: 90vw;
  max-width: 800px;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.2);
  animation: modalSlideIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.05);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
  }

  h3 {
    color: #ffd700;
    margin: 0;
    font-size: 20px;
    font-family: "Papyrus", serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }

  .close-btn {
    background: none;
    border: none;
    color: #ffd700;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 215, 0, 0.1);
      color: white;
      transform: rotate(90deg);
    }
  }
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;

  .modal-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 255, 255, 0.02);

    .tab-btn {
      flex: 1;
      padding: 15px 20px;
      border: none;
      background: none;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.3s ease;
      font-family: "Papyrus", serif;
      font-size: 14px;

      &:hover {
        color: rgba(255, 215, 0, 0.8);
        background: rgba(255, 215, 0, 0.05);
      }

      &.active {
        color: #ffd700;
        border-bottom-color: #ffd700;
        background: rgba(255, 215, 0, 0.1);
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
      }
    }
  }

  .tab-content {
    padding: 25px;
  }

  .info-section {
    h4 {
      color: #ffd700;
      margin: 0 0 20px 0;
      font-size: 18px;
      font-family: "Papyrus", serif;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .form-group.full-width {
      grid-column: 1 / -1;
    }
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
      color: #ffd700;
      font-size: 14px;
      font-weight: bold;
      font-family: "Papyrus", serif;

      .required {
        color: #ff6b6b;
      }
    }

    .form-input,
    .form-select,
    .form-textarea {
      padding: 12px 15px;
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      color: white;
      font-size: 14px;
      font-family: "Papyrus", serif;
      transition: all 0.3s ease;

      &::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }

      &:focus {
        outline: none;
        border-color: rgba(255, 215, 0, 0.6);
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
      }

      &:hover {
        border-color: rgba(255, 215, 0, 0.4);
        background: rgba(255, 255, 255, 0.1);
      }
    }

    .form-select {
      cursor: pointer;

      option {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
      }
    }

    .form-textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.5;
    }
  }

  // 内容设置页面样式
  .content-placeholder {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;

    .feature-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 215, 0, 0.4);
        transform: translateY(-2px);
      }

      .feature-icon {
        font-size: 32px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 215, 0, 0.1);
        border-radius: 50%;
        border: 1px solid rgba(255, 215, 0, 0.3);
      }

      .feature-info {
        flex: 1;

        h5 {
          color: #ffd700;
          margin: 0 0 8px 0;
          font-size: 16px;
          font-family: "Papyrus", serif;
        }

        p {
          color: rgba(255, 255, 255, 0.7);
          margin: 0 0 12px 0;
          font-size: 14px;
          line-height: 1.4;
        }

        .feature-btn {
          padding: 8px 16px;
          border: 1px solid rgba(255, 215, 0, 0.5);
          background: rgba(255, 215, 0, 0.1);
          color: #ffd700;
          border-radius: 4px;
          cursor: pointer;
          font-family: "Papyrus", serif;
          font-size: 12px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 215, 0, 0.2);
            color: white;
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  // 状态管理页面样式
  .status-section {
    .status-info {
      margin: 25px 0;
      padding: 20px;
      background: rgba(255, 215, 0, 0.05);
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 8px;

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .info-label {
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
        }

        .info-value {
          color: #ffd700;
          font-weight: bold;
          font-family: "Papyrus", serif;
        }
      }
    }

    .status-actions {
      margin-top: 25px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
      border: 1px solid rgba(255, 215, 0, 0.1);

      .action-item {
        text-align: center;

        .action-btn {
          padding: 10px 20px;
          border: 1px solid rgba(255, 152, 0, 0.5);
          background: rgba(255, 152, 0, 0.1);
          color: #ff9800;
          border-radius: 6px;
          cursor: pointer;
          font-family: "Papyrus", serif;
          transition: all 0.3s ease;
          margin-bottom: 8px;

          &:hover {
            background: rgba(255, 152, 0, 0.2);
            color: white;
          }
        }

        small {
          display: block;
          color: rgba(255, 255, 255, 0.5);
          font-size: 12px;
        }
      }
    }
  }
}

.modal-footer {
  padding: 20px 25px;
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  background: rgba(255, 255, 255, 0.02);

  .footer-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;

    .cancel-btn,
    .save-btn {
      padding: 12px 24px;
      border: 1px solid;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-family: "Papyrus", serif;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cancel-btn {
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        color: white;
      }
    }

    .save-btn {
      border-color: #27ae60;
      background: rgba(39, 174, 96, 0.2);
      color: #27ae60;

      &:hover:not(:disabled) {
        background: rgba(39, 174, 96, 0.3);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
      }

      &:disabled {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .script-modal {
    width: 95vw;
    max-height: 90vh;
  }

  .modal-body {
    .tab-content {
      padding: 20px 15px;
    }

    .form-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .modal-tabs .tab-btn {
      padding: 12px 15px;
      font-size: 13px;
    }
  }

  .modal-footer .footer-actions {
    flex-direction: column;
    
    .cancel-btn,
    .save-btn {
      justify-content: center;
    }
  }

  .content-placeholder .feature-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .script-modal {
    width: 98vw;
    max-height: 95vh;
  }

  .modal-header {
    padding: 15px 20px;

    h3 {
      font-size: 18px;
    }
  }

  .modal-body .tab-content {
    padding: 15px 10px;
  }
}

// 自定义滚动条样式 - 与角色管理保持一致的金色主题
.script-modal-backdrop {
  // 主滚动条样式
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.7) 0%, 
      rgba(255, 215, 0, 0.5) 50%, 
      rgba(255, 215, 0, 0.3) 100%
    );
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.85) 0%, 
      rgba(255, 215, 0, 0.65) 50%, 
      rgba(255, 215, 0, 0.45) 100%
    );
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 4px rgba(255, 215, 0, 0.15);
  }

  ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.95) 0%, 
      rgba(255, 215, 0, 0.75) 50%, 
      rgba(255, 215, 0, 0.55) 100%
    );
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }

  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
  }
}

// 模态框内部滚动区域
.script-modal {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.6) 0%, 
      rgba(255, 215, 0, 0.4) 100%
    );
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.8) 0%, 
      rgba(255, 215, 0, 0.6) 100%
    );
    border-color: rgba(255, 215, 0, 0.3);
  }

  ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0.9) 0%, 
      rgba(255, 215, 0, 0.7) 100%
    );
    border-color: rgba(255, 215, 0, 0.5);
  }
}

// 特定内容区域的滚动条
.modal-body {
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.6);
  }
}

// Firefox 滚动条支持
.script-modal-backdrop {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.5) rgba(0, 0, 0, 0.4);
}

.script-modal {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.4) rgba(255, 255, 255, 0.03);
}

.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.4) rgba(0, 0, 0, 0.1);
}

// 滚动条发光动画
@keyframes modalScrollbarGlow {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 6px rgba(255, 215, 0, 0.25);
  }
}

// 激活时的动画效果
.script-modal-backdrop ::-webkit-scrollbar-thumb:active,
.script-modal ::-webkit-scrollbar-thumb:active {
  animation: modalScrollbarGlow 0.5s ease-in-out;
}
</style> 